<!-- 订单-我的预约 -->
<template>
	<view class="cityOrder">
		<!-- 分段器 -->
		<view class="subsection">
			<view class="subsection-box">
				<uni-segmented-control :current="subsectionCurrent" :values="subsectionList" style-type="button"
					active-color="#EC606F" @clickItem="subsectionChange" />
			</view>
		</view>

		<view class="content">
			<!-- 商家发布 -->
			<Merchant ref="merchant" v-if="subsectionCurrent === 1"></Merchant>

			<!-- 个人发布 -->
			<Personage v-if="subsectionCurrent === 0" :data="personageData" :status="moreStatus"
				@switchTabs="switchTabs"></Personage>
		</view>


	</view>
</template>

<script>
	// 页面组件
	import Merchant from './components/merchant/merchant.vue'
	import Personage from './components/personage/personage.vue'

	// api请求
	import {
		activityMyActivityApi, // 我的活动列表
	} from '@/api/activity.js'


	// 请求api
	import {
		cityOrder, // 我的预约
		paymentOrder,
		postPartyEvaluate
	} from '@/api/cityParty.js'


	export default {
		components: {
			Merchant, // 商家发布
			Personage, // 个人发布
		},
		data() {
			return {
				// 分段器的数据
				subsectionList: ['我发布的', '我参与的'],
				subsectionCurrent: 0, // 分段器所在index

				merchantCurrent: 1, // 商家发布的当前页
				merchantData: [], // 个人发布的数据

				current: 1, // 个人发布的当前页
				personageData: [], // 个人发布的数据

				moreStatus: 'loading', // 是否显示加载中

				switchTabsData: null, // 全部
			}
		},
		onLoad(props) {
			if (props.subsectionCurrent) {
				this.subsectionCurrent = Number(props.subsectionCurrent)
			}
		},
		onShow() {
			this.init()
		},

		// 返回
		onBackPress(options) {
			uni.switchTab({
				url: '/pages/myTab/index'
			})
			return true
		},

		// 我参与的下拉
		onPullDownRefresh() {
			// 等于1就是我发布的
			if (this.subsectionCurrent === 1) {
				this.$refs.merchant.handlePullDownRefresh()
			}
			// 我参与的
			if (this.subsectionCurrent === 0) {
				this.init()

			}

			uni.stopPullDownRefresh()
			uni.showToast({
				duration: 5000,
				title: '刷新成功',
				icon: 'none'
			})
		},

		// 触底
		onReachBottom() {
			console.log('发布发布', this.subsectionCurrent);

			// 等于1就是我发布的
			if (this.subsectionCurrent === 1) {
				this.$refs.merchant.handleReachBottom()
			}
			// 我参与的
			if (this.subsectionCurrent === 0) {
				this.current++

				this.activityMyActivity({
					pageNum: this.current,
					pageSize: 10
				})
			}


		},
		methods: {
			/**
			 * 初始化
			 */
			init() {
				console.log('zhixign');
				this.moreStatus = 'loading'

				// 商家
				// 我参与的
				if (this.subsectionCurrent === 1) {
					this.$nextTick(() => {
						console.log('执行一遍');
						this.$refs.merchant.init()
					})
				}




				// 个人清空
				this.personageData = []
				this.current = 1

				// 发起请求
				this.activityMyActivity({
					pageNum: this.current,
					pageSize: 10
				})
			},


			/**
			 * 更改分段器
			 */
			subsectionChange(e) {
				if (this.subsectionCurrent !== e.currentIndex) {
					this.subsectionCurrent = e.currentIndex

					this.switchTabsData = null
					this.init()
				}
			},



			/**
			 * 我的活动列表
			 */
			async activityMyActivity(params) {
				if (this.switchTabsData !== null) {
					params['status'] = this.switchTabsData
				}

				this.$public.showLoading(true)
				const res = await activityMyActivityApi(params)
				this.$public.showLoading(false)

				if (res.code !== 200) {
					uni.showToast({
						duration: 3000,
						icon: 'none',
						title: res.msg || '请求失败'
					})
					return
				}

				if (res.rows.length < 10) {
					this.moreStatus = 'noMore'
				} else {
					this.moreStatus = 'more'
				}

				this.personageData.push(...res.rows)

			},

			/**
			 * 我的活动类表更改tabs
			 */
			switchTabs(val) {
				console.log(val, '选择的');

				this.switchTabsData = val.value
				this.init()
			}


		}
	}
</script>

<style lang="less" scoped>
	.cityOrder {
		background: linear-gradient(180deg, rgba(238, 212, 215, 0.8) -3%, rgba(238, 212, 215, 0.2) 100%);
		min-height: 100vh;

		.content {
			#position(relative, 0, 0);
			z-index: 1000;
		}

	}


	// 分段器的样式
	.subsection {
		#flex(-, center, center);
		#padding(34rpx 0 0 0);

		.subsection-box {
			width: 400rpx;
		}


	}
</style>